<template>
  <div>
    <a-modal
      title="手动选择拟聘人员"
      :visible="visible"
      width="70%"
      :maskClosable="false"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
    <commpVxeTable
      :key="reCommpVxeTable"
      :adaptiveHeight="true"
      :isCanWrap="true"
      :config="dataTableConfig"
      :columns="columnsVxe"
      :formItem="formItem"
      ref="administrativeOffice"
      @searchEvent="searchEvent"
      @resetEvent="resetEvent"
      @checkboxChange="checkboxChange"
      >
      <template v-slot:operation_realname="{row}" data-desc="姓名">
        <span style="padding-right: 21;" v-if="row.realname.length == 2">
            <span v-for="(trem,tI) in row.realname.split('')" :key="tI" >
                {{trem}}
                <span v-if="tI+1 !== row.realname.split('').length">&nbsp;&nbsp;</span>
            </span>
        </span>
        <span style="padding-right: 21;" v-else>{{ row.realname }}</span>
      </template>
      <template v-slot:operation_sex="{row}" data-desc="性别">
        <span v-if="row.sex == 1">男</span>
        <span v-if="row.sex == 2">女</span>
      </template>
    </commpVxeTable>
    </a-modal>
  </div>
</template>
<script>
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
export default {
  components:{
      commpVxeTable
  },
  props: {},
  data() {
      return {
          visible: false,
          confirmLoading: false,
          reCommpVxeTable: '',
          dataTableConfig: {
              api: assessCheckApi.getSdtjryPageList,
              rowId: 'id',
              paramet:{}
          },
          formItem: [
              {
                  label: '关键字',
                  model: 'gjz',
              },
          ],
          columnsVxe: [
              {
                  type: 'checkbox',
                  width: 60,
                  fixed: 'left'
              },{
                  title: '姓名',
                  field: 'realname',
                  titleInterval:true,
                  slots: {
                      header:'data1_header',
                      default: 'operation_realname',
                  }
              },{
                  title: '性别',
                  field: 'sex',
                  titleInterval:true,
                  slots: {
                      header:'data2_header',
                      default: 'operation_sex',
                  }
              },{
                  title: '身份证号',
                  field: 'fsfzh',
                  width:185,
              },{
                  title: '工作单位',
                  field: 'fgzdw',
              },{
                  title: '手机号',
                  field: 'phone',
              },
          ],
          valData: {}
      }
  },
  methods: {
    getData(){
      this.resetEvent()
    },
      handleOk(e) {
          this.confirmLoading = true;
          this.visible = false;
          this.confirmLoading = false;
          this.$emit('checkManFuntion',this.valData)
          this.reCommpVxeTable = Date.now()
      },
      handleCancel(e) {
          //console.log('Clicked cancel button');
          this.visible = false;
          this.reCommpVxeTable = Date.now()
      },
      // 勾选
      checkboxChange(val){
          //console.log(val)
          this.valData = val
      },
      // 搜索
      searchEvent(){
          this.dataTableConfig.paramet = {
              ...this.dataTableConfig.paramet,
          }
          //console.log(this.dataTableConfig.paramet)
      },
      // 重置
      resetEvent(){
          this.dataTableConfig.paramet = {
              ...this.dataTableConfig.paramet,
          }
      },
  },
}
</script>
